<template>
	<div class="xp-required">
		<p class="text-start pt-5 pb-[10px]">{{ $t('rewards.starLevels.xpRequired') }}</p>
		<verticle-list :list="config?.star">
			<template #default="{ item }">
				<div
					class="flex justify-start items-center gap-[10px] bg-bg-3 rounded-[4px] px-1 h-[48px] my-[5px]">
					<base-image
						class="w-[40px] aspect-square block"
						:src="item.star.logo"
						alt=""
						type="server" />
					<p class="text-md text-t-2">
						{{ toAmount(Number(item.growthValue)) }}
					</p>
				</div>
			</template>
		</verticle-list>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useActivityStore } from '@/store'
import { toAmount } from '@/utils'
import VerticleList from '@/views/activity/components/table-requirements/verticle-list.vue'
import { BaseImage } from '@/components/base'

const activityStore = useActivityStore()
const config: any = computed(() => activityStore.config)
</script>

<style scoped lang="scss"></style>
